<template>
	<view>
		<view style="text-align: center;  flex-direction: column; ">
			<image :src="usehead"   mode="aspectFill" class="headimage"></image>
		</view>
		<button @click="UpdataShow()" style="width: 90%; ">选择图片显示</button>
	</view>
		<!-- 天气预报设置 -->
		<view style="text-align: center; flex-direction: row;font-size: 12rpx; margin-top: 30rpx;">
			<text class="weathbox">日期：{{totime}}</text>
			<text class="weathbox">{{tonumber}}</text>
			<text class="weathbox">{{toptem}}</text>
			<text class="weathbox">{{bottomtem}}</text>
		</view>
		<!-- 下载图片 -->
		<view style="text-align: center; margin-top: 40rpx;  align-items: center;">
		  <button style="width: 90%; " @click="downloadImage()">下载图片</button>
		</view>
		<view style=" display:flex; flex-direction:row; align-items: center; margin-top: 20rpx; justify-content: center;">
		  <image :src="downimage" class="downimage"></image>
		  <view style="margin-left: 20rpx;">{{tolog}}</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				usehead:"/static/!head.png",
				// 天气变量
				totime:"",
				tonumber:"",
				toptem:"",
				bottomtem:"",
				tolog:"",
				downimage:""
			}
		},
		onLoad() {
			this.WeaShow();
		},
		methods: {
			UpdataShow(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						uni.previewImage({
							urls:res.tempFilePaths
						});
						console.log("UpdataShow chooseImage"+ res.tempFilePaths[0]);
						this.usehead = res.tempFilePaths[0];
						
					}
				})
			},
			
			WeaShow(){
				uni.request({
					url:"http://t.weather.sojson.com/api/weather/city/101230501",
					success: (res) => {
						console.log("接口返回数据：", res.data);
						if(res.data.status==200){
							const forecast = res.data.data.forecast[1];
							this.totime=forecast.ymd,
							this.tonumber=forecast.week,
							this.toptem=forecast.high,
							this.bottomtem = forecast.low
						}
					},
					fail: (err) => {
					      console.error("接口请求失败：", err);
					    }
				})
			},
			downloadImage(){
				uni.downloadFile({
					url:"https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
					timeout: 10000,
					    
					success: (res) => {
						if(res.statusCode==200){
						console.log("下载成功" + res.tempFilePath);
						this.downimage=res.tempFilePath;
						this.tolog="下载成功";
						}
						else{
							this.tolog="下载失败";
						}
					},
					fail: (err) => {
						this.tolog=`下载出错: ${err.errMsg}`;
						console.error('下载出错',err);
					}
				}).onProgressUpdate((res)=>{
					const progress = res.progress;
					this.tolog='正在下载'+`${progress}%`;
					console.log('下载进度：',res.progress+"%");
				})
			}
		}
	}
</script>

<style>
	.headimage{
		height: 100px;
		width: 100px;
		margin-top: 100rpx;
		border-radius: 100%;
	}
	.weathbox{
		margin-left: 30rpx;
	}
	.downimage{
		margin: 20rpx ;
		width: 300rpx;
		height: 400rpx;
	}
</style>
